<template>
	<div class="add-role">
		<el-button type="primary" @click="dialogVisible = !dialogVisible">新增角色</el-button>
		<el-dialog
			title="新增角色"
			:visible.sync="dialogVisible"
			width="60%"
			:before-close="handleClose"
		>
			<div class="ar-container">
				<p>基本信息</p>
				<section>
					<div>
						<el-input placeholder="测试人员" v-model="roleName">
							<template slot="prepend">* 角色名称</template>
						</el-input>
					</div>
					<div class="two">
						<el-input placeholder="测试人员" v-model="roleName1">
							<template slot="prepend">* 使用状态</template>
						</el-input>
						<div class="select">
							<el-select v-model="value" placeholder="请选择">
								<template slot="prepend">* 角色名称</template>
								<el-option
									v-for="item in options"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								></el-option>
							</el-select>
						</div>
					</div>
				</section>
				<p>分类信息</p>
				<div class="role-msg">
					<aside>
						<!-- 折叠面板 -->
						<div class="collapse">
							<!-- 第1个 -->
							<div class="one">
								<header>
									<span
										:class="[oneFlag ? 'el-icon-caret-bottom' : 'el-icon-caret-right']"
										@click="oneFlag = !oneFlag"
									></span>
									<el-checkbox
										:indeterminate="isIndeterminate"
										v-model="checkAll"
										@change="handleCheckAllChange"
										>提醒</el-checkbox
									>
								</header>
								<!-- 第二层中的全部 -->
								<section v-show="oneFlag">
									<!-- 第二层的头部 -->
									<header>
										<span
											:class="[twoFlag ? 'el-icon-caret-bottom' : 'el-icon-caret-right']"
											@click="twoFlag = !twoFlag"
										></span>

										<el-checkbox
											:indeterminate="isIndeterminate"
											v-model="checkAll"
											@change="handleCheckAllChange"
											>提醒</el-checkbox
										>
									</header>
									<!-- 第二层的内容 -->
									<div class="two-content" v-show="twoFlag">
										<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
											<el-checkbox label="收款提醒">收款提醒</el-checkbox>
											<br />

											<el-checkbox label="小区楼栋/维护">小区楼栋/维护</el-checkbox>
											<br />

											<el-checkbox label="房源租赁">房源租赁</el-checkbox>
										</el-checkbox-group>
										<div class="three-content"></div>
									</div>
								</section>
								<!-- 第二层中的全部 -->
								<section v-show="oneFlag">
									<!-- 第二层的头部 -->
									<header>
										<span
											:class="[twoFlag ? 'el-icon-caret-bottom' : 'el-icon-caret-right']"
											@click="twoFlag = !twoFlag"
										></span>

										<el-checkbox
											:indeterminate="isIndeterminate"
											v-model="checkAll"
											@change="handleCheckAllChange"
											>提醒</el-checkbox
										>
									</header>
									<!-- 第二层的内容 -->
									<div class="two-content" v-show="twoFlag">
										<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
											<el-checkbox label="收款提醒">收款提醒</el-checkbox>
											<br />

											<el-checkbox label="小区楼栋/维护">小区楼栋/维护</el-checkbox>
											<br />

											<el-checkbox label="房源租赁">房源租赁</el-checkbox>
										</el-checkbox-group>
										<div class="three-content"></div>
									</div>
								</section>
							</div>
							<!-- 第二个 -->
							<div class="one">
								<header>
									<span
										:class="[oneFlag ? 'el-icon-caret-bottom' : 'el-icon-caret-right']"
										@click="oneFlag = !oneFlag"
									></span>
									<el-checkbox
										:indeterminate="isIndeterminate"
										v-model="checkAll"
										@change="handleCheckAllChange"
										>提醒</el-checkbox
									>
								</header>
								<!-- 第二层中的全部 -->
								<section v-show="oneFlag">
									<!-- 第二层的头部 -->
									<header>
										<span
											:class="[twoFlag ? 'el-icon-caret-bottom' : 'el-icon-caret-right']"
											@click="twoFlag = !twoFlag"
										></span>

										<el-checkbox
											:indeterminate="isIndeterminate"
											v-model="checkAll"
											@change="handleCheckAllChange"
											>提醒</el-checkbox
										>
									</header>
									<!-- 第二层的内容 -->
									<div class="two-content" v-show="twoFlag">
										<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
											<el-checkbox label="收款提醒">收款提醒</el-checkbox>
											<br />

											<el-checkbox label="小区楼栋/维护">小区楼栋/维护</el-checkbox>
											<br />

											<el-checkbox label="房源租赁">房源租赁</el-checkbox>
										</el-checkbox-group>
										<div class="three-content"></div>
									</div>
								</section>
								<!-- 第二层中的全部 -->
								<section v-show="oneFlag">
									<!-- 第二层的头部 -->
									<header>
										<span
											:class="[twoFlag ? 'el-icon-caret-bottom' : 'el-icon-caret-right']"
											@click="twoFlag = !twoFlag"
										></span>

										<el-checkbox
											:indeterminate="isIndeterminate"
											v-model="checkAll"
											@change="handleCheckAllChange"
											>提醒</el-checkbox
										>
									</header>
									<!-- 第二层的内容 -->
									<div class="two-content" v-show="twoFlag">
										<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
											<el-checkbox label="收款提醒">收款提醒</el-checkbox>
											<br />

											<el-checkbox label="小区楼栋/维护">小区楼栋/维护</el-checkbox>
											<br />

											<el-checkbox label="房源租赁">房源租赁</el-checkbox>
										</el-checkbox-group>
										<div class="three-content"></div>
									</div>
								</section>
							</div>
						</div>
					</aside>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	const cityOptions = ['上海', '北京', '广州', '深圳']

	export default {
		data() {
			return {
				oneFlag: false,
				twoFlag: false,
				key: this.$route.params.uid,
				dialogVisible: false,
				roleName: '',
				roleName1: '',
				options: [
					{
						value: '选项1',
						label: '黄金糕'
					},
					{
						value: '选项2',
						label: '双皮奶'
					},
					{
						value: '选项3',
						label: '蚵仔煎'
					},
					{
						value: '选项4',
						label: '龙须面'
					},
					{
						value: '选项5',
						label: '北京烤鸭'
					}
				],
				value: '',
				activeNames: ['1'],
				activeNames1: ['1'],
				checkAll: false,

				checkedCities: ['上海', '北京'],
				cities: ['上海', '北京', '广州', '深圳'],
				isIndeterminate: true
			}
		},
		methods: {
			// 第一层的下拉按钮
			oneDown() {},
			handleChange(val) {
				console.log(val)
			},
			handleChange1(val) {
				console.log(val)
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(() => {
						done()
					})
					.catch(() => {})
			},
			handleCheckAllChange(val) {
				this.checkedCities = val ? cityOptions : []
				this.isIndeterminate = false
			},

			handleCheckedCitiesChange(value) {
				let checkedCount = value.length
				this.checkAll = checkedCount === this.cities.length
				this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length
			}
		},
		watch: {
			key(newValue, oldValue) {
				console.log(newValue, oldValue)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../css/dataDic.scss';
</style>
